<template>
  <common-card class="summary">
    <template #title>学情总结</template>
    <ul class="dimension-list">
      <li class="homework-total">
        <p class="desc">作业布置次数</p>
        <p class="detail">
          <span class="num">{{ summary.homework_count }}</span
          ><span class="suffix">次</span>
        </p>
        <p class="more">
          比年级均值{{
            parseFloat(
              summary.grade_situation_summary.mean_homework_count.toFixed(1)
            )
          }}次
          {{
            getDesc(
              summary.homework_count,
              parseFloat(
                summary.grade_situation_summary.mean_homework_count.toFixed(1)
              )
            )
          }}次
        </p>
      </li>
      <li class="submit-rate-average">
        <p class="desc">平均提交率</p>
        <p class="detail">
          <span class="num">{{ getPercent(summary.commit_rate) }}</span
          ><span class="suffix">%</span>
        </p>
        <p class="more">
          比年级均值{{
            getPercent(summary.grade_situation_summary.commit_rate)
          }}%
          {{
            getDesc(
              getPercent(summary.commit_rate),
              getPercent(summary.grade_situation_summary.commit_rate),
              true
            )
          }}%
        </p>
      </li>
      <li class="right-rate-average">
        <p class="desc">平均正确率</p>
        <p class="detail">
          <span class="num">{{ getPercent(summary.right_rate) }}</span
          ><span class="suffix">%</span>
        </p>
        <p class="more">
          比年级均值{{
            getPercent(summary.grade_situation_summary.right_rate)
          }}%
          {{
            getDesc(
              getPercent(summary.right_rate),
              getPercent(summary.grade_situation_summary.right_rate),
              true
            )
          }}%
        </p>
      </li>
      <li class="time-average">
        <p class="desc">平均作答时长</p>
        <p class="detail">
          <template v-if="getTime(summary.mean_time)[0] > 0">
            <span class="num">{{ getTime(summary.mean_time)[0] }}</span
            ><span class="suffix">小时</span>
          </template>
          <span class="num">{{ getTime(summary.mean_time)[1] }}</span
          ><span class="suffix">分钟</span>
        </p>
        <p class="more">
          比年级均值
          <template
            v-if="getTime(summary.grade_situation_summary.mean_time)[0] > 0"
          >
            <span>{{
              getTime(summary.grade_situation_summary.mean_time)[0]
            }}</span
            ><span>小时</span>
          </template>
          <span>{{
            getTime(summary.grade_situation_summary.mean_time)[1]
          }}</span
          ><span>分钟</span>
          {{
            getDesc(
              summary.mean_time,
              summary.grade_situation_summary.mean_time,
              false,
              true
            )
          }}<template
            v-if="
              getTime(
                Math.abs(
                  summary.mean_time - summary.grade_situation_summary.mean_time
                )
              )[0] > 0
            "
            >{{
              getTime(
                Math.abs(
                  summary.mean_time - summary.grade_situation_summary.mean_time
                )
              )[0] > 0
            }}小时</template
          >{{
            getTime(
              Math.abs(
                summary.mean_time - summary.grade_situation_summary.mean_time
              )
            )[1]
          }}分钟
        </p>
      </li>
      <li class="average-num">
        <p class="desc">人均题数</p>
        <p class="detail">
          <span class="num">{{
            parseFloat(summary?.mean_question_count.toFixed(1))
          }}</span
          ><span class="suffix">道/人</span>
        </p>
        <p class="more">
          比年级均值{{
            parseFloat(
              summary.grade_situation_summary.mean_question_count.toFixed(1)
            )
          }}
          {{
            getDesc(
              parseFloat(summary?.mean_question_count.toFixed(1)) || 0,
              parseFloat(
                summary.grade_situation_summary.mean_question_count.toFixed(1)
              )
            )
          }}
        </p>
      </li>
      <li class="coverage-points">
        <p class="desc">覆盖知识点数</p>
        <p class="detail">
          <span class="num">{{ summary.knowledge_count }}</span>
          <span class="suffix">个</span>
        </p>
        <p class="more">
          比年级均值{{ summary.grade_situation_summary.knowledge_count }}
          {{
            getDesc(
              summary.knowledge_count,
              summary.grade_situation_summary.knowledge_count
            )
          }}
        </p>
      </li>
      <li class="mastering-points">
        <p class="desc">优势知识点数</p>
        <p class="detail">
          <span class="num">{{ summary.good_knowledge_count }}</span
          ><span class="suffix">个</span>
        </p>
        <p class="more">
          比年级均值{{ summary.grade_situation_summary.good_knowledge_count }}
          {{
            getDesc(
              summary.good_knowledge_count,
              summary.grade_situation_summary.good_knowledge_count
            )
          }}
        </p>
      </li>
      <li class="weak-points">
        <p class="desc">薄弱知识点数</p>
        <p class="detail">
          <span class="num">{{ summary.weak_knowledge_count }}</span
          ><span class="suffix">个</span>
        </p>
        <p class="more">
          比年级均值{{ summary.grade_situation_summary.weak_knowledge_count }}
          {{
            getDesc(
              summary.weak_knowledge_count,
              summary.grade_situation_summary.weak_knowledge_count
            )
          }}
        </p>
      </li>
    </ul>
    <p class="tip">
      所选时间内，该班级共布置<span class="bold">{{
        summary.homework_count
      }}</span
      >次作业，覆盖<span class="bold">{{ summary.knowledge_count }}</span
      >个知识点，优势知识点<span class="bold">{{
        summary.good_knowledge_count
      }}</span
      >个，薄弱知识点<span class="bold">{{ summary.weak_knowledge_count }}</span
      >个，整体掌握情况为<span class="bold">{{
        getLevel(summary.right_rate)
      }}</span
      >； 学生平均正确率为<span class="bold"
        >{{ getPercent(summary.right_rate) }}%</span
      >，优秀学生<span class="bold">{{ summary.level_student_count[0] }}</span
      >个，良好学生<span class="bold">{{ summary.level_student_count[1] }}</span
      >个，合格学生<span class="bold">{{ summary.level_student_count[2] }}</span
      >个，待合格学生<span class="bold">{{
        summary.level_student_count[3]
      }}</span
      >个；
    </p>
  </common-card>
</template>
<script setup>
import { useSituationReport } from '@/stores/situation-report'
import { ref, onMounted, watch } from 'vue'
import CommonCard from '../components/CommonCard.vue'
import { getPercent, getLevel, getTime } from '../utils'
import { getClassSummary } from '@/apis/situation-report/index'
const situationReport = useSituationReport()
const summary = ref({
  homework_count: 0,
  commit_rate: 0,
  correct_rate: 0,
  right_rate: 0,
  mean_question_count: 0,
  mean_homework_count: 0,
  knowledge_count: 0,
  weak_knowledge_count: 0,
  good_knowledge_count: 0,
  level_student_count: [0, 0, 0, 0],
  mean_time: 0,
  grade_situation_summary: {
    mean_time: 0,
    homework_count: 0,
    commit_rate: 0,
    correct_rate: 0,
    right_rate: 0,
    mean_question_count: 0,
    mean_homework_count: 0,
    knowledge_count: 0,
    weak_knowledge_count: 0,
    good_knowledge_count: 0,
    most_class_count: [
      {
        class_name: 'string',
        count: 0
      }
    ],
    least_class_count: [
      {
        class_name: 'string',
        count: 0
      }
    ]
  }
})
const getSummary = async () => {
  const { data } = await getClassSummary(situationReport.search)
  summary.value = { ...data }
}

watch(
  () => situationReport.search,
  val => {
    if (val.class_id) {
      getSummary()
    }
  },
  {
    deep: true
  }
)

const getDesc = (num1, num2, isPercent = false, isTime) => {
  if (isTime) {
    if (num1 - num2 < 0) {
      return '低'
    } else {
      return '高'
    }
  }
  let differ = parseFloat(Math.abs(num1 - num2).toFixed(1))
  if (num1 - num2 < 0) {
    return '低' + differ
  } else {
    return '高' + differ
  }
}

onMounted(() => {
  getSummary()
})
</script>
<style lang="less" scoped>
.summary {
  .dimension-list {
    display: flex;
    flex-wrap: wrap;
    gap: @gap;

    li {
      list-style-type: none;
      width: 234px;
      height: 136px;
      padding: 24px 0 0 20px;

      .desc {
        font-weight: 500;
      }

      .detail {
        margin-top: 8px;
      }

      .num {
        font-size: 32px;
        font-weight: 800;
      }

      .more {
        font-size: 14px;
        font-weight: 400;
      }
    }

    .homework-total {
      background: url('@/assets/images/situation-report/homework-total.png')
        no-repeat center/cover;

      * {
        color: #0a2661;
      }
    }

    .submit-rate-average {
      background: url('@/assets/images/situation-report/submit-rate-average.png')
        no-repeat center/cover;

      * {
        color: #513305;
      }
    }

    .complete-rate-average {
      background: url('@/assets/images/situation-report/complete-rate-average.png')
        no-repeat center/cover;

      * {
        color: #0a2661;
      }
    }

    .right-rate-average {
      background: url('@/assets/images/situation-report/right-rate-average.png')
        no-repeat center/cover;

      * {
        color: #0a2661;
      }
    }

    .time-average {
      background: url('@/assets/images/situation-report/time-average.png')
        no-repeat center/cover;

      * {
        color: #514005;
      }
    }

    .average-num {
      background: url('@/assets/images/situation-report/average-num.png')
        no-repeat center/cover;

      * {
        color: #0a2661;
      }
    }

    .coverage-points {
      background: url('@/assets/images/situation-report/coverage-points.png')
        no-repeat center/cover;

      * {
        color: #0a2661;
      }
    }

    .mastering-points {
      background: url('@/assets/images/situation-report/mastering-points.png')
        no-repeat center/cover;

      * {
        color: #514005;
      }
    }

    .weak-points {
      background: url('@/assets/images/situation-report/weak-points.png')
        no-repeat center/cover;

      * {
        color: #513305;
      }
    }
  }

  .tip {
    margin-top: 24px;
    padding: 8px 12px;
    background: #f6f8fe;
    border-radius: 16px;

    .bold {
      font-weight: 700;
    }
  }
}
</style>
